<template>
  <div class="divBox">
    <el-card class="box-card">
      <baseCom ref="baseComRef" />

      <div style="padding-left: 140px;">

        <el-button
          type="primary"
          class="submission"
          :loading="loadingBtn"
          @click="handleSubmit"
        >{{ $t('confirm') }}</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import baseCom from './components/base'

import {
  productCreateApi,
  productUpdateApi,
  productDetailApi
} from '@/api/store'

export default {
  components: { baseCom },
  data() {
    return {
      isDisabled: false,
      currentTab: 0,
      loadingBtn: false
    }
  },
  mounted() {
    if (this.$route.params.id) {
      this.getDetail()
    }
  },
  methods: {
    getDetail() {
      this.loadingBtn = true
      productDetailApi(this.$route.params.id).then(res => {
        this.$refs.baseComRef.formData = res
        this.$refs.baseComRef.formData.categoryId = res.categoryId.toString()
        this.$refs.baseComRef.isDisabled = true
        this.$refs.baseComRef.initBrandList()
        this.loadingBtn = false
      }).catch(() => {
        this.loadingBtn = false
      })
    },
    handleSubmitUp() {
      if (this.currentTab-- < 0) this.currentTab = 0
    },
    handleSubmitNest() {
      this.$refs.baseComRef.submitForm().then(() => {
        if (this.currentTab++ > 2) this.currentTab = 0
      })
    },
    handleSubmit() {
      this.$refs.baseComRef.submitForm().then(() => {
        const data = this.$refs.baseComRef.formData

        // 自定义品牌 删掉品牌id
        if (data.customBrand) {
          data.brandId = ''
        }
        this.loadingBtn = true
        if (this.$route.params.id) {
          productUpdateApi(data)
            .then(async(res) => {
              this.$message.success(this.$t('bianJiChengGong'))
              setTimeout(() => {
                this.$router.push({ path: '/product/list' })
              }, 500)
              this.closeSelectedTag()
              this.loadingBtn = false
            })
            .catch((res) => {
              this.loadingBtn = false
            })
        } else {
          productCreateApi(data)
            .then(async(res) => {
              this.$message.success(this.$t('xinZengChengGong'))
              setTimeout(() => {
                this.$router.push({ path: '/product/list' })
              }, 500)
              this.closeSelectedTag()
              this.loadingBtn = false
            })
            .catch((res) => {
              this.loadingBtn = false
            })
        }
      })
    },
    isActive(route) {
      return route.path === this.$route.path
    },
    closeSelectedTag() {
      this.$store.dispatch('tagsView/delView', this.$route).then(({ visitedViews }) => {
        if (this.isActive(this.$route)) {
          this.toLastView(visitedViews, this.$route)
        }
      })
    },
    toLastView(visitedViews, view) {
      const latestView = visitedViews.slice(-1)[0]
      if (latestView) {
        this.$router.push(latestView.fullPath)
      } else {
        // now the default is to redirect to the home page if there is no tags-view,
        // you can adjust it according to your needs.
        if (view.name === 'Dashboard') {
          // to reload home page
          this.$router.replace({ path: '/redirect' + view.fullPath })
        } else {
          this.$router.push('/')
        }
      }
    }
  }
}
</script>
<style scoped lang="scss"></style>
